<template>
  <!-- 提运单信息 -->
  <div>
    <template v-if="type !== 'detail'">
      <el-form
        ref="form"
        :model="billForm"
        :rules="rules"
        label-width="118px"
        label-position="right"
        class="flex-form"
        size="mini"
      >
        <el-form-item label="提运单号" prop="billNo">
          <el-input
            v-model.trim="billForm.billNo"
            placeholder="请输入提运单号"
          />
        </el-form-item>
        <el-form-item label="货物总件数" prop="goodsTotal">
          <el-input-number
            v-model.trim="billForm.goodsTotal"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="货物毛重(KG)" prop="grossWeight">
          <el-input-number
            v-model.trim="billForm.grossWeight"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="包装种类" prop="packageType">
          <el-select
            v-model="billForm.packageType"
            placeholder="请选择包装种类"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in dict.type.custom_wrap_type"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货物体积(m³)" prop="goodsVolume">
          <el-input-number
            v-model.trim="billForm.goodsVolume"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <el-button
        v-if="editIndex != -1"
        type="success"
        plain
        @click="saveEditBill"
        size="mini"
        icon="el-icon-edit"
        style="margin: 15px 0"
        >保存提运单
      </el-button>
      <el-button
        v-else
        type="success"
        plain
        @click="handleAddBill"
        size="mini"
        icon="el-icon-plus"
        style="margin: 15px 0"
        >新增提运单
      </el-button>
    </template>
    <basic-table
      ref="tableList"
      class="billTable"
      :columns="columns"
      :tableData="billListData"
      :needPagination="false"
      :emptySmall="true"
      :needCheckbox="true"
      @selectionChange="handleSelectionChange"
    >
      <template #packageType="scope">
        <dict-value
          :list="dict.type.custom_wrap_type"
          :dictCode="scope.row.packageType"
        ></dict-value>
      </template>
      <template #operate="scope" v-if="type !== 'detail'">
        <div class="option-menu">
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleDelete(scope.index, billListData)"
          >
            移除
          </el-button>
        </div>
      </template>
    </basic-table>
  </div>
</template>

<script>
export default {
  name: "billList",
  dicts: ["custom_wrap_type"],
  props: {
    arrivarWaybills: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "addEdit",
    },
  },
  data() {
    return {
      billForm: {
        billNo: null,
        goodsVolume: null,
        goodsTotal: null,
        grossWeight: null,
        packageType: null,
      },
      // 表单校验
      rules: {
        billNo: [
          { required: true, message: "提运单号不能为空", trigger: "blur" },
        ],
        goodsVolume: [
          { required: false, message: "货物体积不能为空", trigger: "blur" },
        ],
        goodsTotal: [
          { required: true, message: "货物总件数不能为空", trigger: "blur" },
        ],
        grossWeight: [
          { required: true, message: "货物毛重不能为空", trigger: "blur" },
        ],
        packageType: [
          { required: true, message: "包装种类不能为空", trigger: "blur" },
        ],
      },
      billListData: [],
      columns: [
        {
          prop: "billNo",
          label: "提运单号",
          align: "center",
        },
        {
          prop: "goodsVolume",
          label: "货物体积",
          align: "center",
        },
        {
          prop: "goodsTotal",
          label: "货物总件数",
          align: "center",
        },
        {
          prop: "grossWeight",
          label: "货物毛重",
          align: "center",
        },
        {
          prop: "packageType",
          label: "包装种类",
          align: "center",
          slot: true,
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 150,
          fixed: "right",
        },
      ],
      editIndex: -1,
    };
  },
  watch: {
    arrivarWaybills: {
      immediate: true,
      handler(val) {
        this.billListData = val;
      },
    },
  },
  methods: {
    // 控制只能同时选择一个提运单号
    handleSelectionChange(selection, val) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.tableList.$refs.table.toggleRowSelection(del_row, false);
      }
      if (selection.length > 0) {
        for (let key in this.billForm) {
          this.billForm[key] = selection[0][key];
        }
        this.billListData.forEach((item, index) => {
          if (item.billNo === selection[0].billNo) {
            this.editIndex = index;
          }
        });
      } else {
        this.$refs["form"].resetFields();
        this.editIndex = -1;
      }
    },
    handleAddBill() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let obj = {
            ...this.billForm,
          };
          let list = this.billListData.map((item) => item.billNo);
          if (list.indexOf(obj.billNo) != -1) {
            this.$message.warning("该提运单号已存在!");
            return;
          }
          this.billListData.push(obj);
          this.$emit("sendBillList", this.billListData);
          this.$refs["form"].resetFields();
        }
      });
    },
    saveEditBill() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let obj = {
            ...this.billForm,
          };
          this.billListData.splice(this.editIndex, 1, obj);
          this.$set(this.billListData, this.editIndex, obj);
          this.$emit("sendBillList", this.billListData);
          this.$refs["form"].resetFields();
          this.editIndex = -1;
        }
      });
    },
    handleDelete(index, rows) {
      rows.splice(index, 1);
    },
  },
};
</script>

<style>
</style>
